/**
 * @author Created by qiush on 2017-06-28.
 */

import * as React from 'react';
import {ComponentDecorator, connect} from 'react-redux';

import {IChildSelectionMergedProps, IChildSelectionOwnProps, mapStateToProps} from './IChildSelection';

import './HoverEffectPane.css';

type HoverEffectPaneProps = IChildSelectionOwnProps & IChildSelectionMergedProps;

type HoverEffectPaneElement = JSX.Element | React.ReactChild;

export interface HoverEffectPaneState {
  isHover: boolean;
}

class HoverEffectPane extends React.Component<HoverEffectPaneProps, HoverEffectPaneState> {
  private fixedChildCount = 2;

  constructor(props: HoverEffectPaneProps) {
    super(props);

    this.state = {
      isHover: false
    };
  }

  render() {
    return (
      <div className="HoverEffectPane" onMouseOver={this.mouseOver} onMouseOut={this.mouseOut}>
        {this.renderChildren()}
      </div>
    );
  }

  private mouseOver = () => {
    this.setState({...this.state, isHover: true});
  }

  private mouseOut = () => {
    this.setState({...this.state, isHover: false});
  }

  private renderChildren(): HoverEffectPaneElement[] {
    const current: number = this.props.current;
    return React.Children.map(this.props.children, (child: React.ReactChild, index: number): HoverEffectPaneElement => {
      if (index >= this.fixedChildCount) {
        return child;
      }

      // 只有当前选中的组件(或者是第一个组件) 才显示, 其他的子组件都隐藏
      const className: string = this.getChildClass(current, index);
      const style: React.CSSProperties = this.getChildStyle(current, index);
      return (
        <div className={className} style={style}>
          {child}
        </div>
      );
    });
  }

  private getChildClass(current: number, index: number): string {
    return '';
  }

  private getChildStyle(current: number, index: number): React.CSSProperties {
    if ((0 <= current && current < this.fixedChildCount) || this.state.isHover) {
      return {};
    }
    return {
      display: 'none'
    };
  }

}

type StickyDecorator = ComponentDecorator<IChildSelectionMergedProps, IChildSelectionOwnProps>;
const componentDecorator: StickyDecorator = connect(mapStateToProps);
export default componentDecorator(HoverEffectPane);
